.num{
    width: 100%;
    height: 55rpx;
    margin-top:27rpx;
    display: flex;
    align-items: center;
    img{
        height: 55rpx;
        width: 200rpx;
    }
    span{
        font-size: 26rpx;
        color: rgb(248,248,248);
        position: absolute;
        margin-left: 69rpx;
    }
}
.f1{
    width: 90%;
    height: 2rpx;
    background-color: #E9E9E9;
    margin-top:40rpx;
    margin-left: 5%;
}

.ka{
    // background-color: red;
    width: 100%;
    height: 520rpx;
    margin-top:10rpx;
    // overflow-y: scroll;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    .content{
        display: flex;
        align-items: center;
        justify-content: center;
        // background-color: red;
        width: 1120rpx;
        height: 481rpx;
        margin-top:30rpx;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
        .ka2{
         
            width: 300rpx;
            height: 450rpx;
            margin-left: 110rpx;
            margin-right: 110rpx;
           
            // box-shadow: 0 0 10px #0000ff;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .ka1,.ka3{
            width: 300rpx;
            height: 450rpx;
            // margin-left: 231rpx;
            // transform: scale(1.2,1.2);
            // box-shadow: 0 0 10px #0000ff;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
}
.content[data-type="0"]{
    transform: translate3d(420rpx,0,0);
    .ka1{
        transform: scale(1.15,1.15);
        margin-bottom: 20rpx
    }
}
.content[data-type="1"]{
    transform: translate3d(25rpx,0,0);
    .ka2{
        transform: scale(1.15,1.15);
        margin-bottom: 20rpx
    }
}
.content[data-type="2"]{
    transform: translate3d(-380rpx,0,0);
    .ka3{
        transform: scale(1.15,1.15);
        margin-bottom: 20rpx
    }
}
.ff{
   
    .f2{
        width: 35%;
        height: 2rpx;
        background-color: #E9E9E9;
        margin-top:50rpx;
        margin-left: 5%;
        
    }
    .f3{
        width: 35%;
        height: 2rpx;
        background-color: #E9E9E9;
        margin-top:50rpx;
        margin-left: 60%;
        margin-top:-22rpx;
    }
    .img{
        width: 20%;
        height: 42rpx;
        // background-color: red;
        margin-left: 40%;
        margin-top:-15rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        span{
            color: #999999;
            font-size: 40rpx;
        }
        img{
            width: 42rpx;
            height: 42rpx;
        }
    }
}
.userOrNo{
    width: 100%;
    height: 55rpx;
    // background-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top:61rpx;
    .userButton{
        display: flex;
        align-items: center;
        justify-content: center;
        img{
            width: 215rpx;
            height: 55rpx;
        }
    }
}
.time{
    width: 100%;
    height: 55rpx;
    // background-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-top:61rpx;
    .userTime{
        font-size:30rpx;
        color:rgb(156,210,235);
    }
}
.rhead{
    width: 516rpx;
    height: 23rpx;
    margin: auto;
    font-size: 24rpx;
    color: rgb(153,153,153);
    display: flex;
    align-items: center;
    margin-top:46rpx;
    .rl{
        width: 40%;
        height: 2rpx;
        background-color: #CCCCCC;
    }
    .rt{

    }
    .rr{
        width: 40%;
        height: 2rpx;
        background-color: #CCCCCC;
    }
}
.rules{
    width: 516rpx;
    height: 160rpx;
    margin: auto;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: rgb(153,153,153);
}